@import '~styles/vars';
@import '~styles/extendables';

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 0;

  &.collapse {
    .view {
      height: 0;
    }
  }

  &.front {
    z-index: 100;
  }

  &.back {
    z-index: 50;
  }

  .icon {
    color: $color-grey-shade-1;
  }

  .view {
    @extend %app-width;
    margin: 0 auto;
    overflow: hidden;

    .content {
      @extend %app-width;
      margin: 0 auto;
      padding: $toolbar-height 10px 0;
      background: $color-grey-shade-6;
      overflow-x: hidden;
      overflow-y: scroll;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-perspective: 1000;
      perspective: 1000;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -webkit-overflow-scrolling: touch;

      .header {
        margin: 0 0 5px;

        .right {
          .icon {
            filter: none;
          }
        }
      }
    }
  }

  &.stripped,
  &.dark {
    .view {
      .content {
        padding: 0;
      }
    }
  }

  &.dark {
    z-index: 200;

    .view {
      .content {
        background: $color-black;
        color: $color-white;

        .icon {
          color: $color-white;
        }
      }
    }
  }
}
